<template>
	<u-skeleton v-if="!arr" rows="5"></u-skeleton>
	<view v-else>
		<view class="header" v-if="!data.hasLogin">
			<view class="info" @click="login">
				<view class="left">
					<view class="avatar">
						<image src="../../static/images/logo.png"></image>
					</view>
					<view class="loginfo">
						<view class="name">未登录</view>
						<view class="date">未登录</view>
					</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#fff" size="30"></u-icon>
				</view>
			</view>
		</view>
		<view class="header" v-else>
			<view class="info" @click="login">
				<view class="left">
					<view class="avatar">
						<image v-if="data.userInfo.avatar_file" :src="data.userInfo.avatar_file.url"></image>
						<image v-else src="../../static/images/logo.png"></image>
					</view>
					<view class="loginfo">
						<view class="name">{{data.userInfo.nickname||data.userInfo.username}}</view>
						<view class="date">{{$u.timeFrom(data.userInfo.last_login_date, false)}}登录</view>
					</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#fff" size="30"></u-icon>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="center">
				<view class="editnews" @click="gomynews">
					<view class="news-l">
						<u-icon size="30" class="right" name="edit-pen"></u-icon>
						<text>文章管理</text>
					</view>
					<view class="news-r">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="mylike" @click="gomylike">
					<view class="like-l">
						<u-icon size="30" class="right" name="thumb-up"></u-icon>
						<text>我的点赞</text>
					</view>
					<view class="like-r">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="comment">
					<view class="comment-l">
						<u-icon size="30" class="right" name="chat"></u-icon>
						<text>我的评论</text>
					</view>
					<view class="comment-r">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<view class="aboutwrap">
				<view class="about">
					<view class="about-l">
						<u-icon size="30" class="right" name="setting"></u-icon>
						<text>关于我们</text>
					</view>
					<view class="about-r">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="callme">
					<view class="call-l">
						<u-icon size="30" class="right" name="phone"></u-icon>
						<text>意见反馈</text>
					</view>
					<view class="call-r">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<view class="logout">
				<u-button @click="loginout" style="font-size: 20px;">退出</u-button>
			</view>
			<view class="register">
				<u-button @click="register" style="font-size: 20px;">注册</u-button>
			</view>
		</view>
	</view>

</template>

<script setup>
	import { ref } from 'vue'
	import { mutations, data } from '../../uni_modules/uni-id-pages/common/store.js'
	console.log(data);
	let arr = ref(true)
	//判断有没有登录 登录过就跳转个人中心 没登陆就去登录
	const login = () => {
		if (data.hasLogin) {
			uni.navigateTo({
				url: "/uni_modules/uni-id-pages/pages/userinfo/userinfo"
			})
		} else {
			uni.navigateTo({
				url: "/uni_modules/uni-id-pages/pages/login/login-withpwd"
			})
		}
	}
	const register = () => {
		uni.navigateTo({
			url: "/uni_modules/uni-id-pages/pages/register/register"
		})
	}
	const loginout = () => {
		uni.showModal({
			title: "确定要退出吗?",
			success(res) {
				if (res.confirm) {
					mutations.logout()
				}
			}
		})
	}
	const gomynews = () => {
		uni.navigateTo({
			url: "/pages/articles/list"
		})
	}

	const gomylike = () => {
		uni.navigateTo({
			url: "/pages/like/list"
		})
	}
</script>

<style scoped lang='scss'>
	.header {
		width: 100%;
		height: 200px;
		background-color: #eee;
		display: flex;
		align-items: center;
		padding-top: var(--status-bar-height);

		.info {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			/* border: 2px solid red; */

			.left {
				width: 50%;
				height: 100px;
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-left: 10px;

				.avatar {
					width: 50px;
					height: 50px;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.loginfo {
					color: #fff;
					font-size: 25px;
					margin-left: 10px;
					color: #000;

					.date {
						font-size: 14px;
						color: #ccc;
					}
				}
			}
		}

	}

	.list {
		width: 100%;
		border-radius: 30px 30px 0 0;
		transform: translateY(-20px);
		background-color: #fff;
		z-index: 10;
		/* padding: 0 30px; */
		/* margin: 0 10px; */

		.editnews,
		.mylike,
		.comment,
		.about,
		.callme {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 60px;
			border-bottom: 2px solid #eee;
		}

		.news-l,
		.like-l,
		.comment-l,
		.about-l,
		.call-l {
			display: flex;
			flex-direction: row;
			margin-left: 20px;
		}

		.news-r,
		.like-r,
		.comment-r,
		.about-r,
		.call-r {
			margin-right: 10px;
		}
	}

	.right {
		margin-right: 10px;
	}
</style>